/*
 * @Author: huyu
 * @Date: 2020-06-16 16:10:04
 * @Last Modified by: huyu
 * @Last Modified time: 2020-06-16 18:06:59
 */

// 标题列表
import React, { Component } from "react"
import style from "./Headings.module.less"

export default class Headings extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  render() {
    const { headings = [] } = this.props
    if (headings.length === 0) {
      return null
    }
    const minDepth = Math.min(...headings.map(h => h.depth))
    return (
      <div className={style.main}>
        <p>目录</p>
        <ul className={style.ul}>
          {headings.map(h => (
            <li key={h.id}>
              <a
                className={style[`heading${h.depth - minDepth}`]}
                href={`#${h.id}`}
                title={h.value}
              >
                {h.value}
              </a>
            </li>
          ))}
        </ul>
      </div>
    )
  }
}
